import Vue from "vue";
import Vuex from "vuex";

// .use进行使用，vuex是一个vue的插件
Vue.use(Vuex);

// 创建一个仓库的实例
const store = new Vuex.Store({
  // state就是写仓库的数据
  state: {
    count: 10,
    name: "pengpeng",
    age: "25",
    address: "jiubao",
    msg: "hello Vue!",
  },
  // getters就是vuex里面的计算属性
  // 具有缓存，依赖改变的时候才会重新触发，不会去改变state的原数据
  getters: {
    reverseMsg(state) {
      return state.msg.split("").reverse().join("");
    },
    // 有第二个参数是getters，说明它还可以依赖其他的getters
    reverseMsg2(state, getters) {
      return getters.reverseMsg + "???";
    },
  },
  // 这里是写函数的，mutations是唯一可以去改变state的地方
  // 可以接受一个state参数
  // mutations必须是同步函数(开发工具里面的快照是在mutation函数执行的时候产生的，而不是在数据改变的时候产生)
  mutations: {
    add(state, payload) {
      // setTimeout(() => {
      state.count += payload.a;
      // }, 2000);
    },
    // 接受第二个参数，就是组件传来的值(payload)
    minus(state, payload) {
      state.count -= payload.num;
    },
  },
  // 这里也是写函数的，但是不能去改变state，这里能做的是去调用mutations
  // 这里允许使用异步
  actions: {
    addAsync({ commit }, payload) {
      // console.log(context);
      setTimeout(() => {
        commit("add", payload);
      }, 2000);
    },
  },
  modules: {},
});

export default store;
